<template>
  <el-row>
    <el-col :span="24">
      <h3>{{ title }}</h3>
    </el-col>
    <el-col :span="24">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="请输入城市名称" v-model="inputCity"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" v-show="show">
      <el-button type="primary">{{ city }}</el-button>
      <el-button type="primary">{{ country }}</el-button>
    </el-col>
    <el-col :span="24" v-show="show">
      <el-table stripe fit :data="weatherList" style="width: 80%; margin:10px 10%;">
        <el-table-column
          align="center"
          prop="dt"
          label="日期">
        </el-table-column>
        <el-table-column
          align="center"
          prop="weather.main"
          label="天气">
        </el-table-column>
        <el-table-column
          align="center"
          prop="temp.day"
          label="日间温度">
        </el-table-column>
        <el-table-column
          align="center"
          prop="temp.night"
          label="夜间温度">
        </el-table-column>
        <el-table-column
          align="center"
          prop="pressure"
          label="气压值">
        </el-table-column>
        <el-table-column
          align="center"
          prop="weather.icon"
          label="天气情况">
          <template slot-scope="scope">
            <img :src="scope.row.weather.icon"/>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'Weather',
    data() {
      return {
        title: 'A Simple VUE Weather Demo',
        inputCity: 'Chongqing',
        city: '',
        country: '',
        weatherList: [],
        show: false
      }
    },
    methods: {
      query() {
        if (this.inputCity) {
          this.$http.get(`http://api.openweathermap.org/data/2.5/forecast/daily?q=${this.inputCity}&mode=json&units=metric&cnt=7&appid=f12159c1f548ea9ab7b5ff1907b1df50`)
            .then(response => {
              let data = response.data;
              this.city = data.city.name;
              this.country = data.city.country;
              this.weatherList = data.list;

              this.weatherList.forEach(item => {
                item.weather.main = item.weather[0].main;
                item.weather.icon = `http://openweathermap.org/img/w/${item.weather[0].icon}.png`;
                let date = new Date(item.dt * 1000);
                item.dt = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
              });

              this.show = true
            })
            .catch(error => {
              this.$message({
                type: 'error',
                message: error.data.message
              });
            })
        }else{
          this.$message({
            type: 'info',
            message: '请输入城市名称'
          });
        }

      }
    },
    mounted(){
      this.query()
    }
  }
</script>

<style scoped>

</style>
